<div class="swiper-container">
					<div class="swiper-wrapper">
					<div class="swiper-slide" v-for="item,index of list" :key="index"><img :src="item.img" alt=""></div>
					<!-- <swiper class="l-swiper" :list="list" dots-position="center" :show-desc-mask="false" auto loop></swiper> -->
					<!-- <div class="swiper-slide" ><img src="./../assets/images/home1.png" alt=""></div>
					<div class="swiper-slide" ><img src="./../assets/images/home2.png" alt=""></div>
					<div class="swiper-slide" ><img src="./../assets/images/home3.png" alt=""></div> -->
					</div>
					<div class="swiper-pagination"></div>
				</div>

<template>
    <swiper :options="swiperOption" ref="mySwiper">
        <!-- slides -->
        <swiper-slide>I'm Slide 1</swiper-slide>
        <swiper-slide>I'm Slide 2</swiper-slide>
        <swiper-slide>I'm Slide 3</swiper-slide>
        <div class="swiper-pagination"></div>
    </swiper>
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
require('swiper/dist/css/swiper.css')
export default {
    name: 'carrousel',
    components: {
        swiper,
        swiperSlide
    },
    data() {
        return {
            swiperOption: {
				effect: "coverflow",
                notNextTick: true,
                //循环
                loop:true,
                //设定初始化时slide的索引
                initialSlide:0,
                pagination: {
            　　　　el: '.swiper-pagination',
            　　　　clickable: true // 允许点击小圆点跳转
            　　},
                //自动播放
                autoplay: {
                    delay: 3000,
                    stopOnLastSlide: false,
                    disableOnInteraction: true,
                },
                //滑动速度
                speed:800,
                //滑动方向
                direction : 'horizontal',
                //小手掌抓取滑动
                grabCursor : true,
                //滑动之后回调函数
                on: {
                    slideChangeTransitionEnd: function(){
                      console.log(this.activeIndex);//切换结束时，告诉我现在是第几个slide
                    },
                }

            }
        }
    },
 
 // 如果你需要得到当前的swiper对象来做一些事情，你可以像下面这样定义一个方法属性来获取当前的swiper对象，同时notNextTick必须为true
    computed: {
        swiper() {
         return this.$refs.mySwiper.swiper
        }
    },
    mounted() {
    // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
    // console.log('this is current swiper instance object', this.swiper)
    // this.swiper.slideTo(3, 1000, false)
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.swiper-container{
  height:200px;
  overflow: hidden;
  margin-top:88px;/*px*/
}
.swiper-wrapper{
  height:200px;
}
.swiper-slide{
  height:200px;
  float: left;
  background:red;
}


</style>